.homepage {
  position: relative;
  // width: calc(100% + 24px);
  // height: calc(100% + 48px);
  // margin: 0 -24px;
  * {
    color: white;
  }

  .pagewrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background-image: url('/images/bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    // transform: scale(0.8);
    transform-origin: 0 0;
    // perspective: 600px;
    .headerTitle {
      position: absolute;
      top: 12px;
      right: 0;
      left: 0;
      width: 420px;
      margin: 0 auto;
      overflow: hidden;
      font-weight: bolder;
      font-size: 36px;
      white-space: nowrap;
      text-align: center;
      text-overflow: ellipsis;
      cursor: pointer;
      user-select: none;
    }
    .centerMap {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 60%;
      height: 60%;
      margin: auto;
      box-shadow: 0 0 75px 25px #020a14;
      opacity: 0.5;
    }
    .headerLeft {
      position: absolute;
      top: 36px;
      left: 62px;
    }
    .headerRight {
      position: absolute;
      top: 33px;
      right: 60px;
    }
    .ratioLeft {
      position: absolute;
      top: 127px;
      left: 338px;
    }
    .ratioRight {
      position: absolute;
      top: 127px;
      right: 338px;
    }
    .bottomBox {
      position: absolute;
      bottom: 34px;
      left: 457px;
      opacity: 0.7;
    }
    .leftTopCard {
      position: absolute;
      top: 300px;
      left: 60px;
      transform: perspective(300px) rotateY(5deg);
      transform-origin: 100px 140px;
    }
    .leftBottomCard {
      position: absolute;
      top: 615px;
      left: 70px;
      transform: perspective(300px) rotateY(5deg);
      transform-origin: 100px -140px;
    }
    .rightTopCard {
      position: absolute;
      top: 300px;
      right: 70px;
      transform: perspective(300px) rotateY(-5deg);
      transform-origin: 280px 185px;
    }
    .rightBottomCard {
      position: absolute;
      top: 615px;
      right: 70px;
      transform: perspective(300px) rotateY(-5deg);
      transform-origin: 280px -190px;
    }
    .mask {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1000;
      width: 218px;
      height: 60px;
      background-image: url('/images/mask.png');
      background-repeat: no-repeat;
      background-size: cover;
    }
    .fullscreen {
      position: absolute;
      top: 10px;
      right: 0;
      z-index: 1000;
    }
  }
}
.iconUser {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('/images/user.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
